<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />

    

    

    <title>搭建uniapp项目 | 郑礼德技术栈</title>
    <meta name="author" content="郑礼德" />
    <meta name="keywords" content="" />
    <meta name="description" content="搭建uniapp 项目的方式这里介绍两种使用vue脚手架搭建安装@vue/cli 脚手架工具npm install @vue/cli -g使用vue create 创建项目vue create -p dcloudio/uni-preset-vue fm-weapp安装sass依赖npm install sass-loader node-sass -S在page.json配置页面&amp;quot;pages&amp;quot;: [ //pages数组中第一项表示应用启动页，参考：https:..." />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />

    
    <link rel="alternate" href="/homepage/atom.xml" title="郑礼德技术栈" type="application/atom+xml">
    
    
    <link rel="icon" href="/homepage/images/favicon.ico">
    

    <style type="text/css">
    @font-face {
        font-family: 'icomoon';
        src: url("/homepage/fonts/icomoon.eot?q628ml");
        src: url("/homepage/fonts/icomoon.eot?q628ml#iefix") format('embedded-opentype'),
             url("/homepage/fonts/icomoon.ttf?q628ml") format('truetype'),
             url("/homepage/fonts/icomoon.woff?q628ml") format('woff'),
             url("/homepage/fonts/icomoon.svg?q628ml#icomoon") format('svg');
        font-weight: normal;
        font-style: normal;
    }
    </style>
    
<link rel="stylesheet" href="/homepage/css/style.css">


    <!--[if lt IE 9]>
    <style type="text/css">
    .nav-inner {top:0;}
    .author-meta {position:static;top:0;}
    .search-form {height:36px;}
    </style>
    <script type="text/javascript" src="https://unpkg.com/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <![endif]-->
<meta name="generator" content="Hexo 4.2.0"></head>
<body>

    <main class="app">
        <header id="header" class="header clearfix">
    <div id="nav" class="nav">
    <div class="nav-mobile">
        <button id="open-panel" class="open-panel nav-mobile-item"><i class="icon-documents"></i></button>
        <h1 class="nav-mobile-title nav-mobile-item">郑礼德技术栈</h1>
        <button id="open-menus" class="open-panel nav-mobile-item"><i class="icon-library"></i></button>
    </div>

    <nav id="nav-inner" class="nav-inner">
        
            <a class="nav-item" href="/homepage/">
                <span class="nav-text">首页</span>
            </a>
        
            <a class="nav-item" href="/homepage/categories/front-end">
                <span class="nav-text">前端</span>
            </a>
        
            <a class="nav-item" href="/homepage/categories/back-end">
                <span class="nav-text">后端</span>
            </a>
        
            <a class="nav-item" href="/homepage/categories/linux">
                <span class="nav-text">linux部署</span>
            </a>
        
            <a class="nav-item" href="/homepage/tags">
                <span class="nav-text">标签</span>
            </a>
        
            <a class="nav-item" href="/homepage/archives">
                <span class="nav-text">归档</span>
            </a>
        
            <a class="nav-item" href="/homepage/about">
                <span class="nav-text">关于</span>
            </a>
        
    </nav>
</div>

    <aside id="aside" class="aside">
    <div id="aside-mask" class="aside-mask"></div>
    <div id="aside-inner" class="aside-inner">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit"><i class="icon-search-stroke"></i></button><input type="hidden" name="sitesearch" value="http://zhenglide.gitee.io/homepage"></form>

        
        
        
        

        
        <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#使用vue脚手架搭建"><span class="toc-number">1.</span> <span class="toc-text">使用vue脚手架搭建</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#安装-vue-cli-脚手架工具"><span class="toc-number">1.1.</span> <span class="toc-text">安装@vue&#x2F;cli 脚手架工具</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#使用vue-create-创建项目"><span class="toc-number">1.2.</span> <span class="toc-text">使用vue create 创建项目</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#安装sass依赖"><span class="toc-number">1.3.</span> <span class="toc-text">安装sass依赖</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#在page-json配置页面"><span class="toc-number">1.4.</span> <span class="toc-text">在page.json配置页面</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#配置tabbar"><span class="toc-number">1.5.</span> <span class="toc-text">配置tabbar</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#使用Hbuilder-工具创建项目"><span class="toc-number">2.</span> <span class="toc-text">使用Hbuilder 工具创建项目</span></a></li></ol>
        
    </div>
</aside>

</header>

        <div id="content" class="content">
            <div id="wrapper" class="wrapper" style="max-width: 800px">
                <article class="article" itemscope itemprop="blogPost">
    
    <header class="article-header">
        
        <h1 itemprop="name">
            搭建uniapp项目
        </h1>
        
        <div class="article-meta clearfix">
            <a class="article-date" href="http://zhenglide.gitee.io/homepage/2020/05/24/%E6%90%AD%E5%BB%BAuniapp%E9%A1%B9%E7%9B%AE/index.html">
    
    <i class="icon-calendar"></i>
    
    <time datetime="2020-05-24T13:54:59.000Z" itemprop="datePublished">2020-05-24</time>
</a>

            
<div class="article-tag-list">
    <i class="icon-tag"></i>
    <a class="article-tag-link" href="/homepage/tags/uniapp/" rel="tag">uniapp</a>, <a class="article-tag-link" href="/homepage/tags/vue/" rel="tag">vue</a>
</div>


        </div>
    </header>
    
    <section class="article-body markdown-body">
        
        <p>搭建uniapp 项目的方式这里介绍两种</p>
<a id="more"></a>

<h2 id="使用vue脚手架搭建"><a href="#使用vue脚手架搭建" class="headerlink" title="使用vue脚手架搭建"></a>使用vue脚手架搭建</h2><h3 id="安装-vue-cli-脚手架工具"><a href="#安装-vue-cli-脚手架工具" class="headerlink" title="安装@vue/cli 脚手架工具"></a>安装@vue/cli 脚手架工具</h3><p><code>npm install @vue/cli -g</code></p>
<h3 id="使用vue-create-创建项目"><a href="#使用vue-create-创建项目" class="headerlink" title="使用vue create 创建项目"></a>使用vue create 创建项目</h3><p><code>vue create -p dcloudio/uni-preset-vue fm-weapp</code></p>
<h3 id="安装sass依赖"><a href="#安装sass依赖" class="headerlink" title="安装sass依赖"></a>安装sass依赖</h3><p><code>npm install sass-loader node-sass -S</code></p>
<h3 id="在page-json配置页面"><a href="#在page-json配置页面" class="headerlink" title="在page.json配置页面"></a>在page.json配置页面</h3><pre><code class="json">&quot;pages&quot;: [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            &quot;path&quot;: &quot;pages/index/index&quot;,
            &quot;style&quot;: {
                &quot;navigationBarTitleText&quot;: &quot;首页&quot;
            }
        },{
            &quot;path&quot;: &quot;pages/circle/index&quot;,
            &quot;style&quot;: {
                &quot;navigationBarTitleText&quot;: &quot;圈层&quot;
            }
          },
        {
            &quot;path&quot;: &quot;pages/expoler/index&quot;,
            &quot;style&quot;: {
                &quot;navigationBarTitleText&quot;: &quot;发现&quot;
            }
        }
    ]</code></pre>
<h3 id="配置tabbar"><a href="#配置tabbar" class="headerlink" title="配置tabbar"></a>配置tabbar</h3><pre><code class="json">&quot;tabBar&quot;: {
        &quot;color&quot;: &quot;#8a8a8a&quot;,
        &quot;selectedColor&quot;: &quot;#d4237a&quot;,
        &quot;backgroundColor&quot;: &quot;#fff&quot;,
        &quot;position&quot;: &quot;bottom&quot;,
        &quot;borderStyle&quot;: &quot;black&quot;,
        &quot;list&quot;: [{
                &quot;pagePath&quot;: &quot;pages/index/index&quot;,
                &quot;text&quot;: &quot;首页&quot;,
                &quot;iconPath&quot;: &quot;./static/icon/home.png&quot;,
                &quot;selectedIconPath&quot;: &quot;./static/icon/home-a.png&quot;
            },
            {
                &quot;pagePath&quot;: &quot;pages/circle/index&quot;,
                &quot;text&quot;: &quot;圈层&quot;,
                &quot;iconPath&quot;: &quot;./static/icon/group.png&quot;,
                &quot;selectedIconPath&quot;: &quot;./static/icon/group-a.png&quot;
            },
            {
                &quot;pagePath&quot;: &quot;pages/expoler/index&quot;,
                &quot;text&quot;: &quot;发现&quot;,
                &quot;iconPath&quot;: &quot;./static/icon/more.png&quot;,
                &quot;selectedIconPath&quot;: &quot;./static/icon/more-a.png&quot;
            }
        ]
    }</code></pre>
<p>即可完成初始项目搭建</p>
<h2 id="使用Hbuilder-工具创建项目"><a href="#使用Hbuilder-工具创建项目" class="headerlink" title="使用Hbuilder 工具创建项目"></a>使用Hbuilder 工具创建项目</h2><img src="/homepage/2020/05/24/%E6%90%AD%E5%BB%BAuniapp%E9%A1%B9%E7%9B%AE/%E5%88%9B%E5%BB%BA%E9%A1%B9%E7%9B%AE.png" class="">

<p>用这个工具创建不用安装sass就支持了，其他配置跟上面一样</p>

        
    </section>
</article>



<a id="pagenext" href="/homepage/2020/05/14/%E7%94%A8hexo%E5%88%9B%E5%BB%BA%E5%8D%9A%E5%AE%A2/" class="article-next" title="用hexo创建博客"><i class="icon-arrow-right"></i></a>


<a id="pageprev" href="/homepage/2020/06/01/react%E8%84%9A%E6%89%8B%E6%9E%B6%E6%90%AD%E5%BB%BA/" class="article-prev" title="react脚手架搭建"><i class="icon-arrow-left"></i></a>




            </div>
        </div>
        <footer class="footer">
    Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>, Theme by <a href="https://github.com/sanonz/hexo-theme-concise" target="_blank">Concise</a>

    
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?b13bb4c2ef8300062aab9732bd22eae0";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
    
</footer>

    </main>

    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript">
    $(function() {
        var nodes = {
            nav: $('#nav'),
            aside: $('#aside'),
            asideInner: $('#aside-inner'),
            navInner: $('#nav-inner')
        };

        var doing = false;
        nodes.asideInner.on('webkitAnimationEnd mozAnimationEnd oAnimationEnd oanimationend animationend', function() {
            if (nodes.aside.hasClass('mobile-open')) {
                nodes.aside.removeClass('mobile-open');
            } else {
                nodes.aside.removeClass('mobile-close panel-show');
            }
            doing = false;
        });
        $('#open-panel, #aside-mask').on('click', function() {
            if (doing) {
                return;
            }

            if (nodes.aside.hasClass('panel-show')) {
                nodes.aside.addClass('mobile-close');
            } else {
                nodes.aside.addClass('mobile-open panel-show');
            }
        });
        $('#open-menus').on('click', function() {
            nodes.navInner.slideToggle();
        });

        if (window.innerWidth <= 960) {
            setTimeout(function() {
                nodes.navInner.slideUp();
            }, 3000);
        }
    });
    </script>
    
        
<script src="/homepage/js/scrollspy.min.js"></script>

        <script type="text/javascript">
        $(document.body).scrollspy({target: '#aside-inner'});

        $(window).on('resize', function() {
            var hw = $('#header').width();
            var ww = $('#wrapper').width();
            var space = ($(this).width() - hw - ww) / 2 / 2;

            var pageprev = $('#pageprev');
            var pagenext = $('#pagenext');
            var avg = (pageprev.width() + pagenext.width()) / 2

            if(space > avg) {
                var len = space - avg / 2;
                var styles = {position: 'fixed', top: '50%', marginTop: - (pageprev.width() + pagenext.width()) / 4}
                pageprev.css($.extend({left: hw + len}, styles));
                pagenext.css($.extend({right: len}, styles));
            } else {
                pageprev.removeAttr('style');
                pagenext.removeAttr('style');
            }
        }).trigger('resize');
        </script>
    

</body>
</html>
